<template>
  <div class="character-editor">
    <!-- 加载状态 -->
    <div v-if="loading" class="loading-container">
      <n-spin size="large" />
      <p class="loading-text">正在加载人设数据...</p>
    </div>
    
    <!-- 编辑器内容 -->
    <div v-else class="editor-container">
      <div class="editor-content">
        <!-- 全部人设标签页内容 -->
        <div class="all-characters-pane">
          <div v-if="!isPreviewMode" class="editor-input-container">
            <n-input
              v-model:value="charactersListJson"
              type="textarea"
              placeholder="人设列表数据..."
              class="content-editor custom-scrollbar"
              ref="charactersListEditorRef"
              :disabled="charactersListLoading"
            />
            <!-- 人设列表加载遮罩动画 -->
            <div v-if="charactersListLoading" class="loading-overlay-container">
              <LoadingDots :visible="true" message="正在生成人设" />
            </div>
            <!-- 空数据时显示示例JSON -->
            <div v-if="!charactersListJson || charactersListJson.trim() === '[]'" class="example-json-container">
              <div class="example-json-header">
                <n-text depth="3">示例JSON格式：</n-text>
                <n-button size="tiny" @click="useExampleJson">使用示例</n-button>
              </div>
              <pre class="example-json-content">[
  {
    "姓名": "角色A",
    "派系": "正派",
    "外在特征": "外貌、穿着、体态、行为习惯等外部特征描述",
    "内在特征": "性格、价值观、信念、目标等内部特征描述",
    "社会特征": "社会地位、职业、人际关系等社会特征描述",
    "成长弧光": "角色成长变化轨迹描述",
    "作用": "角色在故事中的作用"
  },
  {
    "姓名": "角色B",
    "派系": "反派",
    "外在特征": "外貌、穿着、体态、行为习惯等外部特征描述",
    "内在特征": "性格、价值观、信念、目标等内部特征描述",
    "社会特征": "社会地位、职业、人际关系等社会特征描述",
    "成长弧光": "角色成长变化轨迹描述",
    "作用": "角色在故事中的作用"
  }
]</pre>
            </div>
          </div>
          <div v-else class="preview-pane custom-scrollbar">
            <div v-if="parsedCharactersList.length > 0" class="parsed-characters-grid">
              <div 
                v-for="(character, index) in parsedCharactersList" 
                :key="character.id" 
                class="character-card"
                :class="getFactionClass(character.faction)"
              >
                <!-- 删除图标 -->
                <div class="delete-icon" @click.stop="deleteCharacterFromPreview(index)">
                  <n-icon size="18">
                    <Remove />
                  </n-icon>
                </div>
                
                <!-- 派系标签 -->
                <div class="faction-tag">
                  {{ getFactionDisplayName(character.faction) }}
                </div>
                
                <!-- 角色姓名圆形色块和箭头 -->
                <div class="character-name-container">
                  <button 
                    class="arrow-button arrow-left" 
                    @click.stop="switchCharacterInfo(index, -1)"
                  >
                    <n-icon><ArrowBackOutline /></n-icon>
                  </button>
                  
                  <div class="character-name-circle">
                    <div class="character-name-text">{{ character.characterName || '未命名' }}</div>
                  </div>
                  
                  <button 
                    class="arrow-button arrow-right" 
                    @click.stop="switchCharacterInfo(index, 1)"
                  >
                    <n-icon><ArrowForwardOutline /></n-icon>
                  </button>
                </div>
                
                <!-- 角色信息 -->
                <div class="character-info">
                  <n-divider dashed>
                    <span class="divider-text">{{ getCharacterInfoKey(index) }}</span>
                  </n-divider>
                  <div class="character-info-value">
                    {{ getCharacterDisplayInfo(character, index) }}
                  </div>
                </div>
              
              </div>
            </div>
            <div v-else class="empty-characters">
              <n-empty description="暂无人设" />
            </div>
            <!-- 人设列表加载遮罩动画 -->
            <div v-if="charactersListLoading" class="loading-overlay-container">
              <LoadingDots :visible="true" message="正在生成人设" />
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 底部标签页和按钮组 -->
    <div class="editor-tabs">
      <n-tabs v-model:value="activeTab" type="line" animated tab-position="bottom" :tab-style="{ minWidth: '80px', maxWidth: '120px', height: '32px' }">
        <template #suffix>
          <n-space>
            <n-button 
              @click="addCharacterToJSON" 
              size="small"
            >
              添加角色
            </n-button>
            <n-button 
              v-if="!isPreviewMode"
              @click="formatJson" 
              size="small"
              :disabled="!charactersListJson || charactersListJson.trim() === ''"
            >
              格式化
            </n-button>
            <n-button 
              @click="isPreviewMode = !isPreviewMode" 
              size="small"
            >
              {{ isPreviewMode ? '编辑' : '预览' }}
            </n-button>
            <n-button 
              @click="charactersListLoading ? abortGeneration('characters') : showGenerateCharacterDialog()" 
              type="primary" 
              size="small" 
              :loading="charactersListLoading"
            >
              {{ charactersListLoading ? '处理中...' : '生成人设' }}
            </n-button>
            <n-button 
              @click="saveCharacters" 
              type="primary" 
              :loading="saving" 
              size="small"
            >
              保存
            </n-button>
          </n-space>
        </template>
        <n-tab-pane name="all" tab="全部人设">
        </n-tab-pane>
      </n-tabs>
    </div>
    
    <!-- 生成对话框 -->
    <GenerateDialog
      v-model:visible="generateDialogVisible"
      :title="generateDialogTitle"
      :confirm-button-text="generateDialogConfirmText"
      :loading="generateDialogLoading"
      :form="generateDialogForm"
      :template-category="generateDialogTemplateCategory"
      :modal-class="generateDialogModalClass"
      @model-select="handleGenerateModelSelect"
      @template-select="handleGenerateTemplateSelect"
      @confirm="handleGenerateConfirm"
      @cancel="handleGenerateCancel"
    />
    
    <!-- 添加人设对话框 -->
    <AddCharacterDialog
      v-model:visible="showAddCharacterDialogVisible"
      :loading="addCharacterLoading"
      @confirm="handleAddCharacterConfirm"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed, watch, onUnmounted } from 'vue'
import { useRoute } from 'vue-router'
import { useMessage, useDialog } from 'naive-ui'
import { CharacterProfileService } from '@/modules/book/services/book-role-service'
import GenerateDialog from '../components/GenerateDialog.vue'
import AddCharacterDialog from '../components/AddCharacterDialog.vue'
import LoadingDots from '../../shared/components/LoadingDots.vue'
import { ArrowBackOutline, ArrowForwardOutline, Remove } from '@vicons/ionicons5'

// 添加组件名称声明
defineOptions({
  name: 'BookRoleEdit'
})

// 路由和消息
const route = useRoute()
const message = useMessage()
const dialog = useDialog()

// 服务实例
const characterProfileService = new CharacterProfileService()

// 响应式数据
const bookId = ref('')
const saving = ref(false)
const loading = ref(false)

const isPreviewMode = ref(true)
const activeTab = ref('all')

// 版本信息相关
const currentVersion = ref(1)
const currentRemark = ref('')
const characterProfiles = ref([]) // 存储人设版本列表
const selectedProfileId = ref(null) // 当前选中的版本ID

// 选择版本
const selectProfile = async (profileId: any) => {
  if (!profileId) {
    charactersListJson.value = ''
    currentVersion.value = 1
    currentRemark.value = ''
    selectedProfileId.value = null
    return
  }
  
  try {
    // 查找选中的版本
    const selectedProfile = characterProfiles.value.find(p => p.id === profileId)
    if (selectedProfile) {
      // 更新当前版本信息
      currentVersion.value = selectedProfile.version || 1
      currentRemark.value = selectedProfile.remark || ''
      selectedProfileId.value = profileId
      
      // 加载该版本的人设数据
      if (selectedProfile.characterProfile) {
        charactersListJson.value = selectedProfile.characterProfile
      } else {
        charactersListJson.value = ''
      }
    }
  } catch (error) {
    console.error('加载版本数据失败:', error)
    message.error('加载版本数据失败')
  }
}

// 加载书籍数据
const loadBookData = async () => {
  if (!bookId.value) return
  
  try {
    loading.value = true
    // 获取人设版本列表
    const profiles = await characterProfileService.getCharacterProfilesByBookId(Number(bookId.value))
    
    // 存储人设版本列表
    characterProfiles.value = profiles || []
    
    // 不再自动获取最新版本，等待用户选择
    if (profiles && profiles.length > 0) {
      // 初始化版本信息，但不设置具体内容
      currentVersion.value = profiles[0].version || 1
      currentRemark.value = profiles[0].remark || ''
      // 默认选中第一个版本
      selectedProfileId.value = profiles[0].id
    } else {
      // 如果没有人设版本，初始化默认值
      currentVersion.value = 1
      currentRemark.value = ''
      charactersListJson.value = ''
      selectedProfileId.value = null
    }
  } catch (error) {
    console.error('加载书籍数据失败:', error)
    message.error('加载书籍数据失败')
  } finally {
    loading.value = false
  }
}



// 全部人设相关
const charactersList = ref([])
const charactersListLoading = ref(false)
const charactersListJson = ref('')
const showAddCharacterDialogVisible = ref(false)
const addCharacterLoading = ref(false)
const charactersListEditorRef = ref(null) // 添加缺失的ref

// 角色信息显示相关
const characterDisplayInfoIndex = ref<number[]>([]) // 存储每个角色当前显示的信息类型索引
const characterInfoTypes = ['外在特征', '内在特征', '社会特征', '成长弧光', '作用'] // 信息类型数组



// 解析人设列表JSON数组字符串为角色对象数组
const parsedCharactersList = computed(() => {
  if (!charactersListJson.value || !isPreviewMode.value) {
    return []
  }
  
  try {
    // 尝试解析JSON数组
    const parsed = JSON.parse(charactersListJson.value)
    if (Array.isArray(parsed)) {
      return parsed.map(char => ({
        id: char.id || Math.random().toString(36).substr(2, 9),
        // 支持中英文字段名
        characterName: char.characterName || char.name || char.姓名 || '未命名',
        faction: char.faction || char.group || char.派系 || '未设定派系',
        externalTraits: char.externalTraits || char.appearance || char.外在特征 || '',
        internalTraits: char.internalTraits || char.personality || char.内在特征 || '',
        socialTraits: char.socialTraits || char.社会特征 || '',
        emotionalArc: char.emotionalArc || char.成长弧光 || ''
      }))
    }
  } catch (error) {
    console.error('解析人设列表JSON失败:', error)
    // 如果不是有效的JSON，返回空数组
    return []
  }
  
  return []
})

// 派系相关配置
const factionConfig = {
  '正派': { color: '#52c41a', bgColor: '#f6ffed' },
  '反派': { color: '#ff4d4f', bgColor: '#fff2f0' },
  '同盟': { color: '#1890ff', bgColor: '#f0f5ff' },
  '中立': { color: '#8c8c8c', bgColor: '#f5f5f5' },
  '工具人': { color: '#722ed1', bgColor: '#f9f0ff' },
  '墙头草': { color: '#fa8c16', bgColor: '#fff7e6' },
  '路人': { color: '#d9d9d9', bgColor: '#fafafa' },
  '主角': { color: '#13c2c2', bgColor: '#e6fffb' },
  '配角': { color: '#eb2f96', bgColor: '#fff0f6' },
  '未设定派系': { color: '#d9d9d9', bgColor: '#fafafa' }
}

// 获取派系显示名称
const getFactionDisplayName = (faction: string) => {
  if (!faction) return '未设定派系'
  
  // 如果是已知的派系，直接返回
  if (factionConfig[faction]) {
    return faction
  }
  
  // 尝试匹配部分关键词
  for (const key in factionConfig) {
    if (faction.includes(key) || key.includes(faction)) {
      return key
    }
  }
  
  // 如果都不匹配，返回原值
  return faction
}

// 获取派系对应的CSS类名
const getFactionClass = (faction: string) => {
  const displayName = getFactionDisplayName(faction)
  return `faction-${displayName}`
}

// 获取角色显示的信息
const getCharacterDisplayInfo = (character: any, index: number) => {
  // 初始化数组，如果还没有为该角色设置索引
  if (characterDisplayInfoIndex.value[index] === undefined) {
    characterDisplayInfoIndex.value[index] = 0
  }
  
  const infoType = characterInfoTypes[characterDisplayInfoIndex.value[index]]
  
  // 根据信息类型返回对应的内容
  switch (infoType) {
    case '外在特征':
      return character.externalTraits || character.appearance || character.外在特征 || '暂无外在特征描述'
    case '内在特征':
      return character.internalTraits || character.personality || character.内在特征 || '暂无内在特征描述'
    case '社会特征':
      return character.socialTraits || character.社会特征 || '暂无社会特征描述'
    case '成长弧光':
      return character.emotionalArc || character.成长弧光 || '暂无成长弧光描述'
    case '作用':
      return character.作用 || '暂无角色作用描述'
    default:
      return '暂无描述'
  }
}

// 获取当前显示的信息类型键
const getCharacterInfoKey = (index: number) => {
  // 初始化数组，如果还没有为该角色设置索引
  if (characterDisplayInfoIndex.value[index] === undefined) {
    characterDisplayInfoIndex.value[index] = 0
  }
  
  return characterInfoTypes[characterDisplayInfoIndex.value[index]]
}

// 切换角色显示的信息
const switchCharacterInfo = (index: number, direction: number) => {
  // 初始化数组，如果还没有为该角色设置索引
  if (characterDisplayInfoIndex.value[index] === undefined) {
    characterDisplayInfoIndex.value[index] = 0
  }
  
  // 计算新的索引，实现循环切换
  const currentIndex = characterDisplayInfoIndex.value[index]
  const newIndex = (currentIndex + direction + characterInfoTypes.length) % characterInfoTypes.length
  characterDisplayInfoIndex.value[index] = newIndex
}

// 格式化JSON
const formatJson = () => {
  if (!charactersListJson.value || charactersListJson.value.trim() === '') {
    message.warning('没有内容需要格式化')
    return
  }
  
  try {
    // 尝试解析JSON
    const parsed = JSON.parse(charactersListJson.value)
    
    // 重新格式化JSON，使用一个tab缩进
    const formatted = JSON.stringify(parsed, null, '\t')
    
    // 更新编辑器内容
    charactersListJson.value = formatted
    
    message.success('JSON格式化成功')
  } catch (error) {
    message.error('JSON格式错误，无法格式化: ' + (error as Error).message)
  }
}

// 使用示例JSON
const useExampleJson = () => {
  charactersListJson.value = `[
  {
    "姓名": "角色名称1",
    "派系": "正派",
    "外在特征": "外貌、穿着、体态、行为习惯等外部特征描述",
    "内在特征": "性格、价值观、信念、目标等内部特征描述",
    "社会特征": "社会地位、职业、人际关系等社会特征描述",
    "成长弧光": "角色成长变化轨迹描述",
    "作用": "主角，推动故事发展"
  },
  {
    "姓名": "角色名称2",
    "派系": "反派",
    "外在特征": "外貌、穿着、体态、行为习惯等外部特征描述",
    "内在特征": "性格、价值观、信念、目标等内部特征描述",
    "社会特征": "社会地位、职业、人际关系等社会特征描述",
    "成长弧光": "角色成长变化轨迹描述",
    "作用": "反派，制造冲突和挑战"
  }
]`
}

const handleGenerateModelSelect = (modelId: any) => {
  generateDialogForm.value.modelId = modelId
}

const handleGenerateTemplateSelect = (template: any) => {
  // 根据传入的参数类型处理，可能是对象或ID
  if (typeof template === 'object' && template.id) {
    generateDialogForm.value.systemPromptId = template.id
  } else if (typeof template === 'number') {
    generateDialogForm.value.systemPromptId = template
  }
}

const handleGenerateConfirm = async () => {
  if (!generateDialogForm.value.modelId) {
    message.warning('请选择生成模型')
    return
  }
  
  // 验证内容
  const config = generateConfig[currentGenerateType.value]
  if (!config.validateContent()) {
    return
  }
  
  generateDialogLoading.value = true
  charactersListLoading.value = true  // 设置加载状态，显示遮罩
  
  // 生成期间强制切换到编辑模式
  const originalPreviewMode = isPreviewMode.value
  isPreviewMode.value = false
  
  // 生成唯一的终止信号
  charactersListAbortSignal.value = 'charactersList_' + Date.now()
  
  // 关闭对话框
  generateDialogVisible.value = false
  
  try {
    // 调用流式生成接口
    const request = {
      modelId: generateDialogForm.value.modelId,
      userPrompt: config.getUserPrompt(),
      systemPromptId: generateDialogForm.value.systemPromptId,
      bookId: bookId.value,
      business: 'character',
      abortSignal: charactersListAbortSignal.value
    }
    
    // 获取响应对象
    const response = await characterProfileService.generateCharactersStream(request)
    
    // 不在这里停止加载动画，让遮罩持续到开始输出内容
    // charactersListLoading.value = false  // 注释掉这行，让遮罩持续到开始输出内容
    
    // 根据生成方式决定如何处理内容
    if (generateDialogForm.value.appendMode === 'overwrite') {
      charactersListJson.value = ''
    }
    
    const reader = response.body.getReader()
    const decoder = new TextDecoder()
    let hasReceivedData = false // 标记是否已接收到数据
    
    // 处理流式数据
    while (true) {
      // 检查是否已被终止
      if (!charactersListAbortSignal.value) {
        break
      }
      
      const { done, value } = await reader.read()
      
      if (done) {
        // 流结束时重置终止信号
        charactersListAbortSignal.value = ''
        break
      }
      
      // 后端返回的是纯文本流，不是JSON格式
      const chunk = decoder.decode(value, { stream: true })
      
      // 直接将文本块添加到内容中，不尝试解析JSON
      if (chunk) {
        // 第一次接收到数据时，停止加载动画
        if (!hasReceivedData) {
          hasReceivedData = true
          charactersListLoading.value = false
        }
        
        if (generateDialogForm.value.appendMode === 'overwrite') {
          // 覆盖模式：直接替换内容
          charactersListJson.value += chunk
        } else {
          // 追加模式：直接追加文本
          charactersListJson.value += chunk
        }
      }
    }
    
    message.success(config.successMessage)
    // 生成完成后恢复原始的预览模式状态
    isPreviewMode.value = originalPreviewMode
  } catch (error) {
    console.error('生成人设失败:', error)
    message.error(config.errorMessage)
    charactersListAbortSignal.value = ''
    charactersListLoading.value = false
    // 生成失败时恢复原始的预览模式状态
    isPreviewMode.value = originalPreviewMode
  } finally {
    generateDialogLoading.value = false
  }
}

const handleGenerateCancel = () => {
  generateDialogVisible.value = false
}

const saveCharacters = async () => {
  if (!bookId.value) {
    message.error('未找到书籍ID')
    return
  }
  
  // 验证JSON格式
  let parsedCharacters = []
  try {
    if (charactersListJson.value.trim()) {
      parsedCharacters = JSON.parse(charactersListJson.value)
      if (!Array.isArray(parsedCharacters)) {
        throw new Error('人设数据必须是数组格式')
      }
    }
  } catch (error) {
    message.error('JSON格式错误: ' + (error as Error).message)
    return
  }
  
  // 表单验证
  if (parsedCharacters.length === 0) {
    const result = await new Promise<boolean>((resolve) => {
      dialog.warning({
        title: '人设列表为空',
        content: '当前人设列表为空，是否确认保存？',
        positiveText: '确认保存',
        negativeText: '取消',
        onPositiveClick: () => resolve(true),
        onNegativeClick: () => resolve(false)
      })
    })
    
    if (!result) {
      return
    }
  }
  
  // 验证每个角色是否有必要字段
  for (let i = 0; i < parsedCharacters.length; i++) {
    const char = parsedCharacters[i]
    
    // 检查姓名字段
    if (!char.characterName && !char.name && !char.姓名) {
      message.error(`第 ${i + 1} 个角色缺少姓名`)
      return
    }
    
    // 检查字段类型
    if (char.characterName && typeof char.characterName !== 'string') {
      message.error(`第 ${i + 1} 个角色的姓名必须是字符串类型`)
      return
    }
    
    // 检查其他字段类型
    const stringFields = ['faction', 'group', '派系', 'externalTraits', 'appearance', '外在特征', 
                         'internalTraits', 'personality', '内在特征', 'socialTraits', '社会特征', 
                         'emotionalArc', '成长弧光']
    
    for (const field of stringFields) {
      if (char[field] !== undefined && typeof char[field] !== 'string') {
        message.error(`第 ${i + 1} 个角色的${field}字段必须是字符串类型`)
        return
      }
    }
  }
  
  // 验证JSON字符串长度
  if (charactersListJson.value.length > 100000) {
    message.error('人设数据过大，请减少内容后重试')
    return
  }
  
  saving.value = true
  try {
    // 准备保存数据
    const saveData = {
      bookId: Number(bookId.value),
      characterProfile: charactersListJson.value, // JSON字符串
      remark: currentRemark.value || `版本 ${currentVersion.value}`,
      version: currentVersion.value // 使用当前版本号，而不是递增
    }
    
    // 调用更新接口，更新当前版本
    const response = await characterProfileService.updateCharacterProfile(saveData)
    
    if (response && response.code === 0) {
      message.success('人设保存成功')
      
      // 保持当前版本号不变，因为我们是在更新当前版本
      // currentVersion.value 保持不变
      currentRemark.value = saveData.remark
      
      // 清除本地暂存数据
      localStorage.removeItem(`book-${bookId.value}-characters-draft`)
      
      // 重新加载数据
      await loadCharactersList()
    } else {
      message.error(response?.msg || '保存失败')
    }
  } catch (error) {
    console.error('保存人设失败:', error)
    message.error('保存人设失败: ' + (error as Error).message)
  } finally {
    saving.value = false
  }
}

// 生成对话框相关变量
const generateDialogVisible = ref(false)
const generateDialogTitle = ref('')
const generateDialogConfirmText = ref('')
const generateDialogLoading = ref(false)
const generateDialogForm = ref({
  modelId: null,
  systemPromptId: null,
  appendMode: 'overwrite'
})
const generateDialogTemplateCategory = ref('人设')
const generateDialogModalClass = ref('')
const currentGenerateType = ref('')
const charactersListAbortSignal = ref('')



// 加载人设列表
const loadCharactersList = async () => {
  if (!bookId.value) return
  
  try {
    // 如果已经在加载中（例如正在流式生成），不要重复设置加载状态
    if (!charactersListLoading.value) {
      charactersListLoading.value = true
    }
    const charactersData = await characterProfileService.getCharacterProfilesByBookId(Number(bookId.value))
    charactersList.value = charactersData || []
    
    // 不再自动加载最新版本的人设，等待用户选择
    if (charactersData && charactersData.length > 0) {
      // 更新人设版本列表
      characterProfiles.value = charactersData
      
      // 如果还没有选中版本，默认选中第一个
      if (!selectedProfileId.value) {
        selectedProfileId.value = charactersData[0].id
        // 加载第一个版本的人设数据
        selectProfile(charactersData[0].id)
      }
    } else {
      characterProfiles.value = []
      selectedProfileId.value = null
      charactersListJson.value = ''
    }
  } catch (error) {
    console.error('加载人设列表失败:', error)
    message.error('加载人设列表失败')
  } finally {
    // 只有在没有其他操作进行时才重置加载状态
    if (!charactersListAbortSignal.value) {
      charactersListLoading.value = false
    }
  }
}

// 监听路由参数变化
watch(() => route.params, async (newParams, oldParams) => {
  if (newParams.id) {
    // 如果书籍ID发生变化，重新加载所有数据
    if (newParams.id !== oldParams?.id) {
      bookId.value = newParams.id as string
      await loadBookData()
      await loadCharactersList()
    }
    
    // 如果路由中有版本参数，加载指定版本的数据
    if (newParams.version) {
      const version = Number(newParams.version)
      // 只有当版本参数发生变化时才重新加载数据
      if (newParams.version !== oldParams?.version) {
        // 查找对应版本的profile
        const targetProfile = characterProfiles.value.find(p => p.version === version)
        if (targetProfile) {
          // 使用getCharacterProfileByBookIdAndVersion获取版本详情
          try {
            const profileDetail = await characterProfileService.getCharacterProfileByBookIdAndVersion(
              Number(bookId.value), 
              version
            )
            if (profileDetail) {
              selectedProfileId.value = targetProfile.id
              currentVersion.value = profileDetail.version || version
              currentRemark.value = profileDetail.remark || ''
              
              // 加载该版本的人设数据
              if (profileDetail.characterProfile) {
                charactersListJson.value = profileDetail.characterProfile
              } else {
                charactersListJson.value = ''
              }
            }
          } catch (error) {
            console.error('加载指定版本数据失败:', error)
            message.error('加载版本数据失败')
          }
        }
      }
    } else if (oldParams?.version && !newParams.version) {
      // 如果从带版本的URL切换到不带版本的URL，加载默认数据
      if (characterProfiles.value.length > 0) {
        const defaultProfile = characterProfiles.value[0]
        selectedProfileId.value = defaultProfile.id
        currentVersion.value = defaultProfile.version || 1
        currentRemark.value = defaultProfile.remark || ''
        
        if (defaultProfile.characterProfile) {
          charactersListJson.value = defaultProfile.characterProfile
        } else {
          charactersListJson.value = ''
        }
      }
    }
  }
}, { immediate: true })

// 监听编辑内容变化，自动保存到本地
let autoSaveTimer: NodeJS.Timeout | null = null
watch(charactersListJson, (newValue) => {
  // 清除之前的定时器
  if (autoSaveTimer) {
    clearTimeout(autoSaveTimer)
  }
  
  // 设置新的定时器，延迟500ms后自动保存
  autoSaveTimer = setTimeout(() => {
    if (bookId.value && newValue.trim()) {
      localStorage.setItem(`book-${bookId.value}-characters-draft`, newValue)
      console.log('自动保存到本地存储')
    }
  }, 500)
})

// 页面卸载时清除定时器
onUnmounted(() => {
  if (autoSaveTimer) {
    clearTimeout(autoSaveTimer)
  }
})


// 添加角色到JSON数组
const addCharacterToJSON = () => {
  try {
    // 解析现有JSON或创建空数组
    let characters = [];
    if (charactersListJson.value && charactersListJson.value.trim() !== '') {
      characters = JSON.parse(charactersListJson.value);
      if (!Array.isArray(characters)) {
        characters = [];
      }
    }
    
    // 创建新角色示例
    const newCharacter = {
      "姓名": `角色${characters.length + 1}`,
      "派系": "未设定派系",
      "外在特征": "外貌、穿着、体态、行为习惯等外部特征描述",
      "内在特征": "性格、价值观、信念、目标等内部特征描述",
      "社会特征": "社会地位、职业、人际关系等社会特征描述",
      "成长弧光": "角色成长变化轨迹描述",
      "作用": "角色在故事中的作用"
    };
    
    // 添加新角色到数组
    characters.push(newCharacter);
    
    // 更新JSON字符串，使用格式化的JSON
    charactersListJson.value = JSON.stringify(characters, null, 2);
    
    // 显示成功消息
    message.success(`已添加角色: ${newCharacter.姓名}`);
  } catch (error) {
    console.error('添加角色失败:', error);
    message.error('添加角色失败: ' + error.message);
  }
};

// 从预览模式中删除角色
const deleteCharacterFromPreview = (index) => {
  if (!charactersListJson.value) return;
  
  try {
    // 解析JSON
    let characters = JSON.parse(charactersListJson.value);
    
    // 确保是数组
    if (!Array.isArray(characters)) {
      message.error('人设数据格式错误，不是数组');
      return;
    }
    
    // 删除指定索引的角色
    if (index >= 0 && index < characters.length) {
      const characterName = characters[index].姓名 || characters[index].characterName || `角色${index + 1}`;
      characters.splice(index, 1);
      
      // 更新JSON字符串
      charactersListJson.value = JSON.stringify(characters, null, 2);
      
      // 显示成功消息
      message.success(`已删除角色: ${characterName}`);
    }
  } catch (error) {
    message.error('删除角色失败: ' + error.message);
  }
};

// 删除人设
const deleteCharacter = (character: any) => {
  dialog.warning({
    title: '确认删除',
    content: `确定要删除人设"${character.characterName}"吗？此操作不可恢复。`,
    positiveText: '确定',
    negativeText: '取消',
    onPositiveClick: async () => {
      try {
        await characterProfileService.deleteCharacterProfile(Number(bookId.value))
        message.success('人设删除成功')
        loadCharactersList()
      } catch (error) {
        console.error('删除人设失败:', error)
        message.error('删除人设失败')
      }
    }
  })
}

// 添加人设确认
const handleAddCharacterConfirm = async (characterData: any) => {
  try {
    addCharacterLoading.value = true
    const newCharacter = {
      ...characterData,
      bookId: Number(bookId.value)
    }
    await characterProfileService.addCharacterProfile(newCharacter)
    message.success('人设添加成功')
    showAddCharacterDialogVisible.value = false
    loadCharactersList()
  } catch (error) {
    console.error('添加人设失败:', error)
    message.error('添加人设失败')
  } finally {
    addCharacterLoading.value = false
  }
}



// 显示生成人设对话框
const showGenerateCharacterDialog = () => {
  currentGenerateType.value = 'character'
  generateDialogTitle.value = generateConfig.character.title
  generateDialogConfirmText.value = generateConfig.character.confirmText
  generateDialogModalClass.value = generateConfig.character.modalClass
  generateDialogForm.value = {
    modelId: null,
    systemPromptId: null,
    appendMode: 'overwrite'
  }
  generateDialogVisible.value = true
}

// 显示添加人设对话框
const showAddCharacterDialog = () => {
  showAddCharacterDialogVisible.value = true
}

// 生成配置
const generateConfig = {
  character: {
    title: '生成人设',
    confirmText: '生成',
    modalClass: 'generate-character-dialog',
    errorMessage: '生成人设失败',
    successMessage: '人设生成成功',
    validateContent: () => {
      return true
    },
    getUserPrompt: () => {
      return '请生成人物设定'
    }
  }
}

// 终止生成
const abortGeneration = (type: string) => {
  if (type === 'characters') {
    charactersListAbortSignal.value = ''
    charactersListLoading.value = false
    message.info('已终止生成')
  }
}

// 初始化
onMounted(async () => {
  // 从路由参数获取书籍ID
  bookId.value = route.params.id as string
  
  if (bookId.value) {
    // 加载书籍信息
    await loadBookData()
    
    // 加载人设列表
    await loadCharactersList()
  }
})
</script>
<style scoped lang="scss">
@use '../styles/BookRoleEdit.scss';
</style>